import 'package:flutter/material.dart';

class Works extends StatefulWidget {
  @override
  _WorksState createState() => _WorksState();
}

class _WorksState extends State<Works> with AutomaticKeepAliveClientMixin {
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  Widget _buildGrid(int i, int count, var retio) {
    return GridView.count(
      // 禁止滚动
      physics: new NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      childAspectRatio: retio,
      //横轴数量 这里的横轴就是x轴 因为方向是垂直的时候 主轴是垂直的
      crossAxisCount: i,
      padding: const EdgeInsets.all(0),
      //主轴间隔
      mainAxisSpacing: 2,
      //横轴间隔
      crossAxisSpacing: 2,
      children: _buildGridTileList(count),
    );
  }

  showSnackbar(String info) async {
    var snackBar = SnackBar(
      content: Text(info),
      backgroundColor: Colors.green,
    );
    Scaffold.of(context).showSnackBar(snackBar);
  }

  List<GestureDetector> _buildGridTileList(int count) {
    return List.generate(
      count,
      (int index) => GestureDetector(
          onTap: () {
            showSnackbar('haha$index');
          },
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.image,
                  size: 30,
                ),
                Text(
                  "工作",
                  style: TextStyle(fontSize: 14, color: Colors.black),
                )
              ],
            ),
          )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.white,
        automaticallyImplyLeading: false,
        title: Text(
          '工作',
          style: TextStyle(color: Colors.black54, fontSize: 20),
        ),
      ),
      body: Container(
        color: Colors.grey[200],
        child: ListView(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(10),
              child: Card(child: _buildGrid(3, 3, 1.5 / 1)),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
              child: Card(
                  child: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Row(
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
                          width: 1,
                          height: 16,
                          color: Colors.blue,
                        ),
                        Text(
                          '工作流程',
                          style: TextStyle(fontSize: 16, color: Colors.black),
                        )
                      ],
                      mainAxisAlignment: MainAxisAlignment.start,
                    ),
                  ),
                  Container(
                    height: 1,
                    color: Colors.grey[200],
                    margin: EdgeInsets.all(10.0),
                  ),
                  _buildGrid(4, 13, 1 / 1),
                ],
              )),
            ),
          ],
        ),
      ),
    );
  }
}
